<template>
	<view class="page">
		<!-- <view style="background-color: #007AFF; height: 825rpx;">
			<image :src="path" style="width: 582rpx;" mode="widthFix"></image>
		</view>
		<l-painter :board="poster2" afterDelay="1000" isCanvasToTempFilePath @success="path = $event"></l-painter> -->
		<!-- <demo-block title="基础用法">
			<l-painter >
				<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block; "></l-painter-view>
				<l-painter-view css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"></l-painter-view>
				<l-painter-view css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"></l-painter-view>
			</l-painter>
		</demo-block> -->
		<!-- <demo-block title="View 容器">
			<l-painter >
				<l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
					<l-painter-view css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block"></l-painter-view>
					<l-painter-view css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block"></l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block> -->
		<demo-block title="Text 文本">
			<!-- <l-painter :css="{backgroundImage: 'url(../../static/lamp.gif)', backgroundColor: 'red', height: '500rpx'}" type>
				<l-painter-view css="padding: 30rpx; color: #222a29">
					
					<l-painter-text 
						text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
						css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
						/>
					<l-painter-text
						text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
						css="text-align:right; padding-top: 20rpx"
						/>
					<l-painter-text
						text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
						css="line-clamp: 3; padding-top: 20rpx;"
						:replace="{word: ['水调歌头','青天','高处'], color: 'red'}"
						/>
				</l-painter-view>
			</l-painter> -->
		</demo-block>

		<!-- <demo-block title="Image 图片">
			<l-painter >
				<l-painter-view>
					<l-painter-text text="基础用法" css="margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999"/>
					<l-painter-view>
						<l-painter-image
							src="../../static/logo.png"
							css="width: 200rpx; height: 200rpx; padding: 0"
							/>
					</l-painter-view>
				</l-painter-view>
				<l-painter-view>
					<l-painter-text text="填充方式" css=" margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999"/>
					<l-painter-view css="display: inline-block; padding-right: 12rpx">
						<l-painter-image
							:src="src"
							css="width: 200rpx; height: 200rpx; object-fit: contain; background: #f5f5f5"
							/>
						<l-painter-text text="contain" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: cover; background: #f5f5f5"
							/>
						<l-painter-text text="cover" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: fill; background: #f5f5f5"
							/>
						<l-painter-text text="fill" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
					<l-painter-view css="display: inline-block; margin-top: 30rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: none; background: #f5f5f5"
							/>
						<l-painter-text text="none" css="margin-top: 10rpx; display: block; text-align:center;"/>
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block> -->
		<!-- <demo-block title="QRcode 二维码">
			<l-painter>
				<l-painter-qrcode 
					text="limeui.qcoon.cn"
					css="width: 200rpx; height: 200rpx"
				/>
			</l-painter>
		</demo-block> -->
		<demo-block title="栗子海报">
			<image v-if="picture" :src="picture" mode="widthFix"></image>
			<l-painter css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)" 
					isCanvasToTempFilePath
					@success="picture = $event" 
					@fail="fail"
					@done="done"
					pathType="url"
					ref="painter"
					>
				<l-painter-image src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/>
				<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
					<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
					<l-painter-text text="为您挑选了一个好物?" css="color: rgba(255,255,255,.7); font-size: 24rpx"/>
				</l-painter-view>
				<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"  css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;"/>
					<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
						<l-painter-text text="￥" css="vertical-align: bottom"/>
						<l-painter-text text="39" css="vertical-align: bottom; font-size: 58rpx"/>
						<l-painter-text text=".39" css="vertical-align: bottom"/>
						<l-painter-text text="￥59.99" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"/>
					</l-painter-view>
					<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
						<l-painter-text text="自营" css="color: #212121; background: #ffb400;"/>
						<l-painter-text text="30天最低价" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"/>
						<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9"/>
						<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9"/>
					</l-painter-view>
					<l-painter-view css="margin-top: 30rpx">
						<l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 462rpx"  text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝" ></l-painter-text>
						<l-painter-qrcode css="position: absolute; width: 128rpx; height: 128rpx; right: 0" text="limeui.qcoon.cn"></l-painter-qrcode>
					</l-painter-view>
				</l-painter-view>
			</l-painter>
			<button type="default" @tap="open">分享朋友圈</button>
			<button type="default" @tap="save">生成图片</button>
		</demo-block>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import {base, poster, poster2} from './data'
export default {
	components: {uniPopup},
	data: () => ({
		poster2,
		poster,
		src: '',
		path: '',
		userInfo: {},
		shareData:{
			// name: '玛咖压片糖果',
			// price: '76800'
			// src:'../../static/logo.png'
		},
		picture: '',
		isShowPopup: false,
		isShowPainter: false
	}),
	created() {

	},
	mounted() {
		setTimeout(() => {
			this.src = 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg'
		}, 500)
	},
	methods: {
		fail(v) {
			console.log(v)
		},
		done(v) {
			console.log('绘制完成')
		},
		// 保存图征
		saveImage() {
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: this.picture,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					});
				},
			});
			// #endif
		},
		// 打开弹窗
		open() {
			const popup = this.$refs.popup
			popup.open()
		},
	}
};
</script>

<style lang="stylus" scoped>
.w
	width 100%
	height 300rpx
	position relative
.b 
	position absolute
	left: 180rpx
	top: 18rpx
	background: rgba(#1989fa, 0.5)
	width: 80rpx
	height: 80rpx
	// transform: rotate(50deg)
	// transform-origin: bottom right
.a 
	position absolute
	left: 180rpx
	top: 18rpx
	background: #1989fa
	width: 80rpx
	height: 80rpx
	transform: rotate(50deg)
	transform-origin: 100% 50%
.page
	background #fff
.my-poster-wrap
	width 80vw
	background-color #fff
	border-radius 20rpx
.my-poster
	padding 40rpx 64rpx
.my-poster-header
	display flex
	align-items center
	margin-bottom 36rpx
.my-poster-header__avatar
	height 64rpx
	width 64rpx
	border-radius 50%
	margin-right 16rpx
.my-poster-header__info, .my-poster-header__info-name
	width 136rpx
	height 28rpx
	margin-bottom 12rpx
.my-poster-header__info-tips
	width 172rpx
	height 20rpx
.my-poster-body, .my-poster-body__pic
	height 450rpx
.my-poster-body__price
	height 28rpx
	width 152rpx
	margin-top 24rpx
.my-poster-footer
	margin-top 40rpx
	display flex
.my-poster-footer__title
	flex 1
	margin-right 24rpx
	display flex
	flex-direction column
	justify-content flex-end
.my-poster-footer__title .my-skeleton
	height 28rpx
	margin-top 20rpx
.my-poster-footer__qr
	width 120rpx
	height 120rpx
.my-poster__action
	position fixed
	left 50%
	bottom 40rpx
	transform translateX(-50%)
	z-index 9999997
	height 88rpx
	width 60%
	background linear-gradient(to right, #FF004E, #FF4242)
	color #fff
	display flex
	align-items center
	justify-content center
	border-radius 200rpx
// .my-poster__action-button
// 	display flex
// 	width 100rpx
// 	height 100rpx
// 	background-color #ff7900
// 	border-radius 50%
// 	align-items center
// 	justify-content center
.my-skeleton
	background-color #f2f3f5
.my-skeleton--animate
	animation my-skeleton-blink 1.2s ease-in-out infinite
@keyframes my-skeleton-blink
	50%
		opacity 0.6
</style>
